<template>
	<div class="recommend">
		<p class="title">热门推荐</p>
		<ul>
			<router-link tag="li" 
				class="item border-bottom"
				v-for="(item) of recommendList"
				v-bind:key="item.id"
				v-bind:to="'/detail/'+item.id" >
				<img class="item-img" :src="item.imgUrl" />
		        <div class="item-info">
		        	<p class="item-title" v-text="item.title"></p>
		          	<p class="item-desc" v-text="item.desc"></p>
		          	<p class="item-price">￥{{item.price}}<span class="qi">起</span></p>
		        </div>  
			</router-link>		     
    	</ul>
	</div>
</template>

<script type="text/javascript">
	export default{
		name:"Recommend",
		props:["recommendList"],          //业务简单，不做类型检查，这种字符串内部的驼峰式同样支持自动转换
		data:function(){
			return {
				msg:"recommend",
			}	
		}
	}
</script>

<style type="text/css" scoped>
	.title{
		margin-top:0;line-height:0.8rem;background-color: #eee;text-indent: .2rem;
	}
	.item{
		width: 100%;overflow: hidden;height: 1.9rem; display: flex;
	}
	.item .item-img{
		width: 1.5rem;height: 1.5rem;padding: 0.1rem;
	}
	.item .item-info{
		flex: 1;padding: 0.1rem;min-width: 0;
	}
	.item .item-info .item-title{
		line-height: 0.54rem;font-size: 0.32rem;
		overflow: hidden;white-space:nowrap;text-overflow: ellipsis;
	}
	.item .item-info .item-desc{
		line-height: 0.5rem;color: #aeaead;
		overflow: hidden;
		/* 无高度文本强制不换行，因此内容不拆开文档流，超出部分用省略号*/
		white-space:nowrap;text-overflow: ellipsis;
	}
	.item .item-info .item-price{
		margin-top: 0.16rem; font-size: 20px; color: #d58031;
	}
	.item .item-info .item-price .qi{
		color: #aeaead;font-size: 0.24rem;
	}
</style>

